Introduction

Applicator is creative, responsive and highly customizable admin template based on Bootstrap 4. It comes with lof of UI components & widgets, layout variations, theme colors, charts, authentication pages and ton of useful features, this is the ideal template for your next dashboard or admin web app project.

Thank you for downloading Applicator - Admin Dashboard Template. If you have any queries, please feel free to contact us.

Author by: Theme_Nate

Support via Email:: jiasheng_93@hotmail.com

Getting Started

Once you have unzip the compressed file, you’ll see something like below

  • Applicator
    • demo
    • starter
    • documentation

Each directory contains demo & starter folder.

Demo

This folder contains all demo source code of Espire, you may possible to import code to your project from code samples provided in this folder.

Starter

This is a starter pack for developer, it initialize the basic of the template. You can create pages and write your own code here, we highly recommend you copy this folder to your workspace for development.

You can see the following structure in the folders:

    • app
      • assets
        • css
        • fonts
        • images
        • js
        • scss
        • vendor
      • index
    • package
    • Gruntfile

Build Tools

Applicator use Grunt to compile and distribute codes.

Installing Grunt

If your PC have installed Grunt, you may skip this part.

Before installing Grunt, you must have NodeJs installed, Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

Download Node.js

Run the command below at your cmd as Administrator to install Grunt

 npm install -g grunt-cli

Navigate into the work folder which contain package.json and run the command below:

npm install

Once you have completed the installation above, you will be able to run the following Grunt commands in your cmd from your work folder.

COMMAND DESCRIPTION
grunt watch grunt watch his will automaically compile the sass files on save.
grunt sass grunt sass will compile the pages sass files to css on excute once.
grunt build grunt build wil minify your js & css into a folder called dist

Page Structure

The HTML structure is the same throughout the template.

CSS

These is all the core css that required by the theme, you can include any 3rd party dependecies css below <-- page css --> comment

JavaScript

These is all the core js that required by the theme, you can include any 3rd party dependecies js below <-- page js --> comment

<script src="assets/vendor/jquery/dist/jquery.min.js"></script>
<script src="assets/vendor/popper.js/dist/umd/popper.min.js"></script>
<script src="assets/vendor/bootstrap/dist/js/bootstrap.js"></script>
<script src="assets/vendor/PACE/pace.min.js"></script>
<script src="assets/vendor/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script>     
<script src="assets/vendor/d3/d3.min.js"></script>



<script src="assets/js/app.js"></script> 

<script src="assets/js/configurator.js"></script>

Theming & Colors

We have provided various theme colors for side navigation & header, you can add theme classes on .app to customize your theme.
Solid Header
header-primary
header-success
header-info
header-warning
header-danger
header-dark
Gradient Header
header-primary-gradient
header-success-gradient
header-info-gradient
header-warning-gradient
header-danger-gradient
Side Nav Color
null
side-nav-dark

Utility Classes

Applicator comes with many helpful CSS classes that will enable you to style your elements and build your pages any way you want.

Margin

Class Description
Margin
.m-0 margin: 0px
.m-5 margin: 5px
.m-10 margin: 10px
.m-15 margin: 15px
.m-20 margin: 20px
.m-25 margin: 25px
.m-30 margin: 30px
... 5 interval per unit
.m-150 margin: 150px
Margin Top
.m-t-0 margin-top: 0px
.m-t-5 margin-top: 5px
.m-t-10 margin-top: 10px
.m-t-15 margin-top: 15px
.m-t-20 margin-top: 20px
.m-t-25 margin-top: 25px
.m-t-30 margin-top: 30px
... 5 interval per unit
.m-t-150 margin-top: 150px
Margin Bottom
.m-b-0 margin-bottom: 0px
.m-b-5 margin-bottom: 5px
.m-b-10 margin-bottom: 10px
.m-b-15 margin-bottom: 15px
.m-b-20 margin-bottom: 20px
.m-b-25 margin-bottom: 25px
.m-b-30 margin-bottom: 30px
... 5 interval per unit
.m-b-150 margin-bottom: 150px
Margin Right
.m-r-auto margin-right: auto
.m-r-0 margin-right: 0px
.m-r-5 margin-right: 5px
.m-r-10 margin-right: 10px
.m-r-15 margin-right: 15px
.m-r-20 margin-right: 20px
.m-r-25 margin-right: 25px
.m-r-30 margin-right: 30px
... 5 interval per unit
.m-r-150 margin-right: 150px
Margin Left
.m-l-auto margin-left: auto
.m-l-0 margin-left: 0px
.m-l-5 margin-left: 5px
.m-l-10 margin-left: 10px
.m-l-15 margin-left: 15px
.m-l-20 margin-left: 20px
.m-l-25 margin-left: 25px
.m-l-30 margin-left: 30px
... 5 interval per unit
.m-l-150 margin-left: 150px
Margin Vertical
.m-v-0 margin-top: 0px; margin-bottom: 0px;
.m-v-5 margin-top: 5px; margin-bottom: 5px
.m-v-10 margin-top: 10px; margin-bottom: 10px
.m-v-15 margin-top: 15px; margin-bottom: 15px
.m-v-20 margin-top: 20px; margin-bottom: 20px
.m-v-25 margin-top: 25px margin-bottom: 25px
.m-v-30 margin-top: 30px margin-bottom: 30px
... 5 interval per unit
.m-v-150 margin-top: 150px; margin-bottom: 150px
Margin Horizon
.m-h-auto margin-left: auto; margin-right: auto
.m-h-0 margin-left: 0px; margin-right: 0px;
.m-h-5 margin-left: 5px; margin-right: 5px
.m-h-10 margin-left: 10px; margin-right: 10px
.m-h-15 margin-left: 15px; margin-right: 15px
.m-h-20 margin-left: 20px; margin-right: 20px
.m-h-25 margin-left: 25px margin-right: 25px
.m-h-30 margin-left: 30px margin-right: 30px
... 5 interval per unit
.m-h-150 margin-left: 150px; margin-right: 150px

Padding

Class Description
Padding
.p-0 padding: 0px
.p-5 padding: 5px
.p-10 padding: 10px
.p-15 padding: 15px
.p-20 padding: 20px
.p-25 padding: 25px
.p-30 padding: 30px
... 5 interval per unit
.p-150 padding: 150px
Padding Top
.p-t-0 padding-top: 0px
.p-t-5 padding-top: 5px
.p-t-10 padding-top: 10px
.p-t-15 padding-top: 15px
.p-t-20 padding-top: 20px
.p-t-25 padding-top: 25px
.p-t-30 padding-top: 30px
... 5 interval per unit
.p-t-150 padding-top: 150px
Padding Bottom
.p-b-0 padding-bottom: 0px
.p-b-5 padding-bottom: 5px
.p-b-10 padding-bottom: 10px
.p-b-15 padding-bottom: 15px
.p-b-20 padding-bottom: 20px
.p-b-25 padding-bottom: 25px
.p-b-30 padding-bottom: 30px
... 5 interval per unit
.p-b-150 padding-bottom: 150px
Padding Right
.p-r-0 padding-right: 0px
.p-r-5 padding-right: 5px
.p-r-10 padding-right: 10px
.p-r-15 padding-right: 15px
.p-r-20 padding-right: 20px
.p-r-25 padding-right: 25px
.p-r-30 padding-right: 30px
... 5 interval per unit
.p-r-150 padding-right: 150px
Padding Left
.p-l-0 padding-left: 0px
.p-l-5 padding-left: 5px
.p-l-10 padding-left: 10px
.p-l-15 padding-left: 15px
.p-l-20 padding-left: 20px
.p-l-25 padding-left: 25px
.p-l-30 padding-left: 30px
... 5 interval per unit
.p-l-150 padding-left: 150px
Padding Vertical
.p-v-0 padding-top: 0px; padding-bottom: 0px;
.p-v-5 padding-top: 5px; padding-bottom: 5px
.p-v-10 padding-top: 10px; padding-bottom: 10px
.p-v-15 padding-top: 15px; padding-bottom: 15px
.p-v-20 padding-top: 20px; padding-bottom: 20px
.p-v-25 padding-top: 25px padding-bottom: 25px
.p-v-30 padding-top: 30px padding-bottom: 30px
... 5 interval per unit
.p-v-150 padding-top: 150px; padding-bottom: 150px
Padding Horizon
.p-h-0 padding-left: 0px; padding-right: 0px;
.p-h-5 padding-left: 5px; padding-right: 5px
.p-h-10 padding-left: 10px; padding-right: 10px
.p-h-15 padding-left: 15px; padding-right: 15px
.p-h-20 padding-left: 20px; padding-right: 20px
.p-h-25 padding-left: 25px padding-right: 25px
.p-h-30 padding-left: 30px padding-right: 30px
... 5 interval per unit
.p-v-150 padding-top: 150px; padding-bottom: 150px

Width

Class Description
.width-0 width: 0px
.width-10 width: 10%
.width-15 width: 15%
.width-20 width: 20%
.width-25 width: 25%
.width-30 width: 30%
... 5 interval per unit
.width-100 width: 100%

Font Size

Class Description
.font-size-8 font-size: 8px
.font-size-9 font-size: 9px
.font-size-10 font-size: 10px
.font-size-11 font-size: 11px
.font-size-12 font-size: 12px
.font-size-13 font-size: 13px
.font-size-14 font-size: 14px
.font-size-15 font-size: 15px
... 1 interval per unit until 30
.font-size-30 font-size: 30px
.font-size-35 font-size: 35px
.font-size-40 font-size: 40px
.font-size-45 font-size: 45px
.font-size-50 font-size: 50px
... 5 interval per unit until 200
.font-size-200 font-size: 200px

Position

Class Description
.relative position: relative
.absolute position: absolute
.fixed position: fixed
.static position: static

Overflow

Class Description
.overflow-hidden overflow: hidden
.overflow-y-hidden overflow-y: hidden
.overflow-x-hidden overflow-x: hidden
.overflow-auto overflow: auto
.overflow-y-auto overflow-y: auto
.overflow-x-auto overflow-x: auto

Border

Class Description
.border border: 1px solid $border-color;
.border.top border top
.border.right border right
.border.bottom border bottom
.border.left border left
.no-border no border

Border Radius

Class Description
.border-radius-4 border-radius: 4px
.border-radius-6 border-radius: 6px
.border-radius-8 border-radius: 4px
.border-radius-8 border-radius: 8px
.border-radius-10 border-radius: 10px
.border-radius-round border-radius: 50px

Opacity

Class Description
.opacity-01 opacity: 0.1;
.opacity-02 opacity: 0.2;
.opacity-03 opacity: 0.3;
.opacity-04 opacity: 0.4;
.opacity-05 opacity: 0.5;
.opacity-06 opacity: 0.6;
.opacity-07 opacity: 0.7;
.opacity-08 opacity: 0.8;
.opacity-09 opacity: 0.9;
.opacity-10 opacity: 1;

Changelog

v1.0.1

  • [Fixed] Documentation syntax highlighter issue

v1.0.0

  • Release